<template>
	<view>
		<up-navbar placeholder title="" @leftClick="back"></up-navbar>
		<view class="main">
			<text id="title">想找什么工作？</text>
			<text id="num">
				<text id="total">{{ total }}</text>
				/ 10
			</text>
			<br />
			<text id="info">添加多个求职期望，可获得更多精准求职机会</text>
			<view class="show">
				<view v-for="item in intentions" class="item" :key="item.intentionsId" @click="gotoAdd(item.intentionsId)">
					<text>{{ item.positionName }} [{{ item.workPlace.split('-')[1] }}]</text>
					<br />
					<text>
						{{ item.industryName }} |
						<text v-if="item.startSalary !== 0" style="font-size: 15px">{{ item.startSalary }}-{{ item.endSalary }}K</text>
						<text v-else>无限</text>
					</text>
				</view>
			</view>
			<view class="add" @click="gotoAdd(99)">
				<up-icon name="plus-circle-fill" color="#59a0ff" size="28"></up-icon>
				<text id="addTitle" v-if="total < 10">添加求职期望</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			total: 0,
			intentions: {}
		};
	},
	onShow() {
		this.getJob();
	},
	mounted() {
		const pages = getCurrentPages();
		console.log(pages);
		this.getJob();
	},
	methods: {
		// 返回
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 获取求职意向
		getJob() {
			this.$api
				.getIntentions({
					userId: uni.getStorageSync('user').candidateId
				})
				.then((res) => {
					this.intentions = res.data;
					this.total = res.total;
				});
		},
		// 前往添加/修改
		gotoAdd(id) {
			const pages = getCurrentPages();
			console.log(pages);
			uni.removeStorageSync('item');
			uni.navigateTo({
				url: `/pages/personal/workIntentionView?id=${id}&total=${this.total}`
			});
		}
	}
};
</script>

<style>
.main {
	padding: 20px;
}

#title {
	font-size: 25px;
}

#info {
	margin-top: 10px;
	font-size: 15px;
}

#num {
	font-size: 25px;
	float: right;
}

#total {
	color: #59a0ff;
}

.add {
	width: 100%;
	height: 40px;
	border: 2px dashed #59a0ff;
	border-radius: 100px;
	display: flex;
	justify-content: center;
}

#addTitle {
	font-size: 25px;
	color: #59a0ff;
	margin-top: 1px;
	margin-left: 5px;
}

.mian {
	margin-top: 30px;
}

.show {
	margin-top: 40px;
	margin-bottom: 40px;
}

.item {
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 8px; /* 圆角边框 */
	background-color: #f9f9f9; /* 背景色，增加对比度 */
}

.item text:first-child {
	font-size: 18px; /* 略大 */
	font-weight: bold; /* 加粗 */
}

.item text:nth-child(3) {
	font-size: 14px; /* 略小 */
	color: gray; /* 灰色 */
}
</style>
